<template>
  <a-modal :visible="open" :width="860" :title="formTitle" @cancel="onClose">
    <a-form-model ref="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" :model="form">
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="项目名称" prop="projectName">
            <a-input v-model="form.projectName" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="项目经理" prop="projectManager" >
            <a-select  :default-active-first-option="false" :show-arrow="false"
                      :filter-option="false" show-search :not-found-content="null" v-model="form.projectManager"
                      @search="handleChange" disabled>
              <a-select-option v-for="(d, index) in projectManagerOptions" :key="index" :value="d.id">{{
                  d.name + '(' + d.mobile + ')'
                }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="设备类型" prop="eqType">
            <a-select placeholder="请选择设备类型" v-model="form.eqType" disabled>
              <a-select-option v-for="(d, index) in dict.type['eq_type']" :key="index" :value="d.value">{{ d.label
                }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="发货方式" prop="deliverWay">
            <a-select  v-model="form.deliverWay" disabled>
              <a-select-option v-for="(d, index) in dict.type['deliver_way']" :key="index" :value="d.value">{{ d.label
                }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="21" :offset="2" style="margin-bottom: 10px;">
          <a-table v-if="form.eqType == 2" :data-source="VehicleInfoMaterialList" :columns="material" bordered :pagination="false" row-key="device" >
          </a-table>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="发货名称" prop="deliverName">
            <a-textarea v-model="form.deliverName" auto-size  disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="发货原因" prop="deliverDesc">
            <a-textarea v-model="form.deliverDesc"  disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 始发地 -->
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="始发地" prop="beginAddr">
            <a-textarea v-model="form.beginAddr"  disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="目的地" prop="endAddr">
            <a-input v-model="form.endAddr" disabled></a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="详细地址及联系人" prop="endContact">
            <a-textarea v-model="form.endContact"  disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="装车人员" prop="puckVehPeople">
            <!-- <a-input v-model="form.puckVehPeople" placeholder="请输入" /> -->
            <a-select  :default-active-first-option="false" :show-arrow="false"
                      :filter-option="false" show-search :not-found-content="null" v-model="form.puckVehPeople"
                      @search="handleChange" disabled>
              <a-select-option v-for="(d, index) in projectManagerOptions" :key="index" :value="d.id">{{
                  d.name + '(' + d.mobile + ')'
                }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="需求车型" prop="needVehicle">
            <a-input v-model="form.needVehicle"  disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="发货日期" prop="deliverDate">
            <a-date-picker v-model="form.deliverDate" show-time style="width:100%"
                           @change="(__dirname, data) => handleTime(data, 'deliverDate')" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="预计到货日期" prop="needGiveDate">
            <a-date-picker v-model="form.needGiveDate" show-time style="width:100%"
                           @change="(__dirname, data) => handleTime(data, 'needGiveDate')" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="发货设备入库单号" prop="pushStashNo">
            <a-input v-model="form.pushStashNo"  disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="发货设备移库单号" prop="changeStashNo">
            <a-input v-model="form.changeStashNo"  disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="预估装载率" prop="estimateLoadRate">
            <a-input-number v-model="form.estimateLoadRate" :max="100" style="width:100%"  disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="公里数" prop="kilometre">
            <a-input-number v-model="form.kilometre" style="width:100%"  disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-show="form.eqType !== '0'">
        <a-col :span="12">
          <a-form-model-item label="图片" prop="dingtalkImgLinks">
            <base-upload v-model="form.dingtalkImgLinks" disabled></base-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-show="form.eqType === '0'">
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="链接" prop="dingtalkImgLinks">
            <a-input v-model="form.dingtalkImgLinks" style="width:100%" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="当前节点">
            <a-timeline :reverse="true">
              <a-timeline-item
                v-for="(item, index) in timeLineData"
                :key="index"
                :color="index === timeLineData.length - 1 ? 'green' : 'blue'"
              >
                {{ item.activityName }} {{ item.createTimeDate }}
              </a-timeline-item>
            </a-timeline>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <template slot="footer">
      <a-space>
<!--        <a-button type="primary" :loading="submitLoading" @click="submitForm">-->
<!--          保存-->
<!--        </a-button>-->
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </template>
  </a-modal>

</template>

<script>

import baseUpload from '@/components/imgUpload'
import {
  handleInitiate,
  getDingUserList,
  materialAddList,
  getVehicleInfo,
  getVehicleApplyInfoByVehicleId,
  getMaterialList
} from '@/api/demo'
import addressList from "@/utils/ChinaCitys.js";
import {Cascader as ACascader,Timeline } from 'ant-design-vue'
export default {
  name: 'CreateForm',
  props: {
  },
  components: {
    baseUpload,
    'a-timeline': Timeline,
    'a-timeline-item': Timeline.Item,
    'a-cascader': ACascader // 局部注册组件
  },
  dicts: ['deliver_way', 'eq_type'],
  data() {
    return {
      submitLoading: false,
      formTitle: '',
      // 表单参数
      form: {
        projectName: undefined,
        eqType: undefined,
        projectManager: undefined,
        deliverWay: undefined,
        deliverDesc: undefined,
        deliverName: undefined,
        endAddrList: undefined,
        endContact: undefined,
        puckVehPeople: undefined,
        deliverDate: undefined,
        needGiveDate: undefined,
        needVehicle: undefined,
        estimateLoadRate: undefined,
        pushStashNo: undefined,
        changeStashNo: undefined,
        kilometre: undefined,
        dingtalkImgLinks: undefined,
        isAbnormalSum: false,
        sights: [{ area: undefined, phone: undefined }],
        beginAddr: undefined,
        endAddr:undefined
      },
      timeLineData:[],
      open: false,
      addressList: undefined,
      projectManagerOptions: [],
      VehicleInfoMaterialList:[],
      dataSourceType: [
      ],
      countType: 0,
      recordType: {},
      columnsType: [
        {
          title: '品名',
          dataIndex: 'device',
        },
        {
          title: '规格',
          dataIndex: 'size',
        },
        {
          title: '数量',
          dataIndex: 'count',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }
  },
  filters: {
  },
  created() {
    this.addressList = addressList
  },
  computed: {
  },
  watch: {
  },
  methods: {
    onClose() {
      this.open = false
      this.iconVisible = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.iconVisible = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        projectName: undefined,
        eqType: undefined,
        projectManager: undefined,
        deliverWay: undefined,
        deliverDesc: undefined,
        deliverName: undefined,
        endAddrList: undefined,
        endContact: undefined,
        puckVehPeople: undefined,
        deliverDate: undefined,
        needGiveDate: undefined,
        needVehicle: undefined,
        estimateLoadRate: undefined,
        pushStashNo: undefined,
        changeStashNo: undefined,
        kilometre: undefined,
        dingtalkImgLinks: undefined,
        isAbnormalSum: false,
        sights: [{ area: undefined, phone: undefined }],
        beginAddr: undefined,
        endAddr:undefined
      }
      this.timeLineData = []
      this.VehicleInfoMaterialList = []
      this.$refs.form?.clearValidate()
    },
    handleChange(value) {
      getDingUserList({ mobile: value }).then((res) => {
        this.projectManagerOptions = res.data
      })
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset()
      this.open = true
      this.formTitle = '详情'
      getVehicleInfo({ id: row.vehicleId }).then((res) => {
        for (let item in this.form) {
          this.form[item] = res.data[item]
        }
        this.form.eqType = res.data.eqType.toString()
        if (this.form.eqType == 2) {
          getMaterialList(row.vehicleId).then((res) => {
            this.VehicleInfoMaterialList = res.rows
            console.log(this.VehicleInfoMaterialList)
          })
        }
      })
      getVehicleApplyInfoByVehicleId(row.vehicleId)
        .then((res) => {
          this.timeLineData = res.rows
        })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.$emit('select-tree')
      getMenu(row.menuId).then(response => {
        this.form = response.data
        this.open = true
        this.formTitle = '修改菜单'
      })
    },
    handleTime(data, name) {
      this.form[name] = data
    }
  }
}
</script>
<style lang="less">
.add-btn {
  font-size: 20px;
  color: #08c;
  margin-top: 10px;
}

// th {
//   padding: 8px !important;
// }

// td {
//   padding: 12px 8px !important;
// }

.editable-add-btn {
  margin: 10px 0;
}
</style>
